<template>
  <baseForm :cloum="cloum" ref="baseForm"  v-model="form" name="menuTwo_form"/>
  <div class="setting-column__list"  ref="list">
    <ul>
        <li v-for="item in tablist" :key="item.id">
            <el-tag class="tag" style="cursor: move;"><el-icon><DCaret /></el-icon></el-tag>
            <span>
              {{item.title}}
            </span>
        </li>
    </ul>

  </div>
</template>
<script>
import Sortable from 'sortablejs'
import baseForm from "@/components/baseForm/index.vue";
export default {
  components: {
    baseForm
  },
  data() {
    return {
      tablist:[
        {
          title:'苹果1',
          id:"1"
        },
        {
          title:'苹果2',
          id:"2"
        },
        {
          title:'苹果3',
          id:"3"
        },
        {
          title:'苹果4',
          id:"4"
        },
        {
          title:'苹果5',
          id:"5"
        },
        {
          title:'苹果6',
          id:"6"
        },
        {
          title:'苹果7',
          id:"7"
        },
      ],
      cloum:[
        {
          name:'水果:',
          value_name:'fruits',
          type:2,
          placeholder:'请选择',
          list:[
            {
              label:'苹果',
              value:'1',
              id:'1'
            },
            {
              label:'香蕉',
              value:'2',
              id:'2'
            }
          ]
        },
        {
          name:'menutwo:',
          value_name:'city',
          type:1,
          hide:true,
          placeholder:'请选择',
        },
      ],
    };
  },
  mounted() {
    this.tablist.length>0 && this.rowDrop()
  },
  methods: {
    rowDrop(){
      const _this = this
      const tbody = this.$refs.list.querySelector('ul')
      console.log(tbody,'tbody')
      Sortable.create(tbody, {  // 使用 Sortable.js 创建一个可拖拽排序的对象
        // 设置拖拽手柄（只允许通过类名为 '.move' 的元素开始拖拽）
        handle: ".tag",
        animation: 300,
        // 拖拽时被拖拽元素的额外样式类名
        ghostClass: "ghost",
        onEnd({ newIndex, oldIndex }) {//元素被拖拽的时候 会触发这个onEnd的方法
          console.log('被拖拽了')
          // 获取组件中存储待排序数据的数组
          const tableData = _this.tablist
          // 从原数组中移除被拖拽的行，并获取这个行数据
          const currRow = tableData.splice(oldIndex, 1)[0]
          // 将移除的行数据插入新位置
          tableData.splice(newIndex, 0, currRow)
          console.log(_this.tablist)
        }
      })
    },
    //let arr = [1, 2, 3, 4, 5];
    // 删除操作
    //arr.splice(1, 2); // 从索引1开始删除2个元素，现在arr为[1, 4, 5]
    // 返回被删除的元素数组：[2, 3]
    // 插入操作
    //arr.splice(1, 0, 'a', 'b'); // 在索引1处插入'a'和'b'，现在arr为[1, 'a', 'b', 4, 5]
    // 替换操作
    //arr.splice(2, 1, 'c', 'd'); // 从索引2开始删除1个元素，并插入'c'和'd'，现在arr为[1, 'a', 'c', 'd', 5]
    // 返回被删除的元素数组：['b']
  }
};
</script>
<style scoped lang="scss">
.setting-column__list{
  width: 500px;
  margin: auto;
  border: 1px solid ghostwhite;
  /* 示例：只为下边框添加阴影 */
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  li{
    list-style: none;
    margin:10px 0
  }
}
</style>
